<template>
	<view class="payment">
		<view class="payment_header">
			<view class="payment_header_banckBox">
				<view @click="backReturn" class="payment_header_banckBox_left">
					<image src="../../../static/home/search_left.png"></image>
				</view>
				<view class="payment_header_banckBox_text">
					安全支付
				</view>
			</view>
			<view class="payment_header_Price">
				￥{{totalPrice || '---'}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="payment_content">
			<view @click="num = 2" :class="num == 2?'payment_content_list_active':''" class="payment_content_list">
				<view class="payment_content_list_left">
					<image src="../../../static/home/WXPay.jpg" mode="widthFix"></image>
				</view>
				<view class="payment_content_list_right">
					<view class="payment_content_list_right_left">
						微信支付
					</view>
					<view class="payment_content_list_right_right">
						<view class="payment_content_list_right_right_radio"></view>
						<image class="payment_content_list_right_right_radio_Active"
							src="../../../static/home/radio.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view @click="num = 1" :class="num == 1?'payment_content_list_active':''" class="payment_content_list">
				<view class="payment_content_list_left">
					<image src="../../../static/home/aliPay.png" mode="widthFix"></image>
				</view>
				<view class="payment_content_list_right">
					<view class="payment_content_list_right_left">
						支付宝支付
					</view>
					<view class="payment_content_list_right_right">
						<view class="payment_content_list_right_right_radio"></view>
						<image class="payment_content_list_right_right_radio_Active"
							src="../../../static/home/radio.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view @click="num = 0" :class="num == 0?'payment_content_list_active':''" class="payment_content_list">
				<view class="payment_content_list_left">
					<image src="../../../static/home/moonPay.png" mode="widthFix"></image>
				</view>
				<view class="payment_content_list_right">
					<view class="payment_content_list_right_left">
						余额支付
					</view>
					<view class="payment_content_list_right_right">
						<view class="payment_content_list_right_right_radio"></view>
						<image class="payment_content_list_right_right_radio_Active"
							src="../../../static/home/radio.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="payment_bottomBox">
			<view class="payment_bottomBox_left">
				<view class="payment_bottomBox_left_left">
					订单金额
				</view>
				<view class="payment_bottomBox_left_right">
					<text class="payment_bottomBox_left_right_left">￥</text><text>{{totalPrice || '---'}}</text>
				</view>
			</view>
			<view class="payment_bottomBox_right">
				<button @click="showFun" class="payment_bottomBox_right_button">
					付款
				</button>
			</view>
		</view>

		<pay-keyboard @Fpassword="Fpassword" ref="password" :show_key="show_key" @hideFun="hideFun"
			@getPassword="getPassword"></pay-keyboard>
		<u-loading-page loading-text="正在支付" :loading="loading"></u-loading-page>
	</view>
</template>
<script>
	import payKeyboard from '@/components/keyboard.vue'
	import {
		bootorderselectdetail,
		bootorderpayBatch,
		bootordergetMoney
	} from '@/api/home'
	export default {
		components: {
			payKeyboard: payKeyboard
		},
		data() {
			return {
				num: 0,
				form: {},
				show_key: false,
				loading: false,
				orderIds: null,
				totalPrice: null,
				hasPassWord: true,

			}
		},
		onLoad(data) {
			this.orderIds = JSON.parse(data.ids);
			// this.bootorderselectdetail()
			this.bootordergetMoney(data.orderNo)
		},
		methods: {
			bootordergetMoney(orderNo) {
				bootordergetMoney({
					orderNo: orderNo
				}).then(res => {
					console.log(res)
					this.totalPrice = res.data.totalPrice
					this.hasPassWord = res.data.hasPassWord
				})
			},
			backReturn() {
				uni.navigateBack({});
			},
			Fpassword() {
				uni.navigateTo({
					url: '/pages/mine/forgetpass'
				});
			},
			showFun() {
				if (this.num == 0) {
					if (this.form.hasPassWord === false) {
						this.show_key = true
					} else {
						uni.navigateTo({
							url: '/pages/mine/payment'
						});
					}
				} else if (this.num == 2) {
					this.wxPay()
				} else if (this.num == 1) {
					this.aliPay()
				}
			},
			wxPay() {
				this.loading = true;
				let obj = {
					type: this.num,
				};
				bootorderpay(this.olderId, obj).then(ress => {
					if (ress.success == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: ress.data,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								if (res.success == 1) {
									uni.redirectTo({
										url: '/pages/index/paymentSuccessful/paymentSuccessful?id=' + this.olderId
									});
								} else {
									uni.showToast({
										title: res.message,
										duration: 2000,
										icon: 'none'
									});
								}
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					} else {
						uni.showToast({
							title: ress.message,
							duration: 2000,
							icon: 'none'
						});
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			aliPay(){
				this.loading = true;
				let obj = {
					type: this.num,
				};
				bootorderpay(this.olderId, obj).then(ress => {
					if (ress.success == 1) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: ress.data,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								if (res.success == 1) {
									uni.redirectTo({
										url: '/pages/index/paymentSuccessful/paymentSuccessful?id=' + this.olderId
									});
								} else {
									uni.showToast({
										title: res.message,
										duration: 2000,
										icon: 'none'
									});
								}
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					} else {
						uni.showToast({
							title: ress.message,
							duration: 2000,
							icon: 'none'
						});
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			hideFun() {
				this.show_key = false
			},
			getPassword(n) {
				this.$refs.password.clier()
				this.show_key = false
				this.loading = true;
				let obj = {
					type: this.num,
					password: n.password,
					orderIds: this.orderIds
				};
				bootorderpayBatch(obj).then(res => {
					if (res.success == 1) {
						uni.redirectTo({
							url: '/pages/index/paymentSuccessful/paymentSuccessful'
						});
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: 'none'
						});
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			bootorderselectdetail() {
				bootorderselectdetail(this.olderId).then(res => {
					console.log(res)
					this.form = res.data
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.payment {
		height: 100vh;

		.payment_header {
			width: 100%;
			height: 686upx;
			background-image: url(../../../static/home/payBgTop.jpg);
			background-size: 100% 100%;
			padding-top: var(--status-bar-height);

			.payment_header_banckBox {
				display: flex;
				align-items: center;
				position: relative;
				justify-content: center;
				padding: 22upx 0;

				.payment_header_banckBox_left {
					position: absolute;
					left: 0;
					top: calc(50%);
					transform: translateY(-50%);
					padding: 0 32upx;

					image {
						width: 16upx;
						height: 28upx;
					}
				}

				.payment_header_banckBox_text {
					font-size: 34upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 44upx;
				}
			}

			.payment_header_Price {
				margin-top: 86upx;
				text-align: center;
				font-size: 72upx;
				font-family: DINCondensed-Bold, DINCondensed;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 86upx;
			}
		}

		.payment_content {
			height: calc(100% - 686upx + 212upx + var(--status-bar-height));
			margin-top: calc(-212upx - var(--status-bar-height));
			background-color: #FAFAFA;
			border-radius: 60upx 60upx 0px 0px;
			padding: 34upx;

			.payment_content_list {
				padding: 20upx 10upx;
				border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;

				.payment_content_list_left {
					padding: 16upx;

					image {
						width: 70upx;
					}
				}

				.payment_content_list_right {
					width: calc(100% - 70upx - 16upx);
					margin-left: 16upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.payment_content_list_right_left {
						font-size: 36upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.8);
						line-height: 50upx;
					}

					.payment_content_list_right_right {
						.payment_content_list_right_right_radio_Active {
							width: 36upx;
							height: 36upx;
							display: none;
						}

						.payment_content_list_right_right_radio {
							width: 36upx;
							height: 36upx;
							border: 2upx solid rgba(0, 0, 0, 0.3);
							border-radius: 1000%;
						}
					}
				}


			}

			.payment_content_list_active {
				.payment_content_list_right_right_radio {
					display: none;
				}

				.payment_content_list_right_right_radio_Active {
					display: block !important;
				}
			}
		}

		.payment_bottomBox {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 222upx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 4upx 8upx 0px rgba(0, 0, 0, 0.1);
			padding: 0 40upx;

			.payment_bottomBox_left {
				display: flex;
				align-items: center;

				.payment_bottomBox_left_left {
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.6);
					line-height: 44upx;
				}

				.payment_bottomBox_left_right {
					font-size: 40upx;
					font-family: DINCondensed-Bold, DINCondensed;
					font-weight: bold;
					color: #F87D4A;
					line-height: 48upx;

					.payment_bottomBox_left_right_left {
						font-size: 34upx;
					}
				}
			}

			.payment_bottomBox_right {
				.payment_bottomBox_right_button {
					height: 100upx;
					width: 274upx;
					background-image: url(../../../static/home/buttonBG.png);
					background-size: 100% 100%;
					background-color: rgba(0, 0, 0, 0);

					font-size: 36upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 100upx;

					&::after {
						display: none;
					}
				}
			}
		}
	}
</style>
